<template>
    <div class="rubik-big-a">
        <div class="boxCtrl">


            <div class="layerCtrl"
                 :class="{'isShow':isShow}">
                <div style="margin: 0 10px;
          ">

                    layer:
                    <select name="layer" v-model="layer">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                    <button @click="newGame">NEW GAME</button>
                    <button @click="random">随机打乱</button>
                </div>
            </div>


            <button @click="ctrlKey.boxMove('top')">X</button>
            <button @click="ctrlKey.boxMove('bottom')">X'</button>
            <button @click="ctrlKey.boxMove('left')">Y</button>
            <button @click="ctrlKey.boxMove('right')">Y'</button>
            <button @click="ctrlKey.boxMove('zTop')">Z</button>
            <button @click="ctrlKey.boxMove('zBottom')">Z'</button>



            <button @click="backZero">-O-</button>


        </div>

        <div class="rubikXBox">
            <div ref="rubikX" class="rubikX"></div>
        </div>
        <div style="position: absolute;top: 0;left: 0;font-size: 13px">fps:{{fps}}</div>
    </div>
</template>

<script>
    import RubikX from "./rubikCube";
    export default {
        name: "testTT",
        mounted() {
            this.newGame();
            this.calcFps();
            // this.fpsTest();
        },
        data(){
            return {
                isShow:true,
                ctrlKey:null,
                ctrlKeyMethods:null,
                layer:1,
                bigMove:'',
                bigX:-38,bigY:-38,bigZ:0,
                fps:0,
                fps2:0
            }
        },
        watch:{
            bigX(){
                this.bigMoving();
            },
            bigY(){
                this.bigMoving();
            },
            bigZ(){
                this.bigMoving();
            }
        },
        methods:{
            calcFps(debounce = 1000){
                let vm=this;
                let lastTime = Date.now();
                let count = 0; // 记录decounce周期内渲染次数
                (function loop(){
                    count++
                    const now = Date.now()
                    if( now - lastTime > debounce){
                        const fps = Math.round(count / ((now - lastTime) / 1000))
                        lastTime = now
                        count = 0
                        vm.fps=fps;
                        //  console.log('fps:', fps)
                    }
                    requestAnimationFrame(loop)
                })()
            },
            backZero(){
                this.isShow=!this.isShow;
            },
            random(){
                this.ctrlKey.random();
            },
            newGame(){
                let obj=this.$refs.rubikX;
                obj.innerHTML='';
                this.ctrlKey=new RubikX(obj,this.layer);

                this.bigMove=this.$refs.rubikX.getElementsByClassName('bigMove')[0];
                this.bigMoving();
                this.ctrlKeyMethods=this.ctrlKey.methods;
            },
            bigMoving(){
                this.bigMove.style.transform=`rotateX(${this.bigX}deg) rotateY(${this.bigY}deg) rotateZ(${this.bigZ}deg)`;
            },
        }
    }
</script>

<style scoped>

    .boxCtrl [type=range]{
        width: 136px;
        margin: 0;
    }
    .boxCtrl span{
        display: inline-block;
        width: 50px;
    }
    .layerCtrl select{
        width: 70px;
        height: 30px;
    }
    .btnCtrl button,.boxCtrl button{
        width: 80px;
        height: 35px;
        font-size: 16px;
        text-align: center;
    }
    .btnCtrl button{
        display: block;
        font-size: 20px;
        margin-bottom: 5px;
    }
    button:hover{
        background-color: #333;
        color:#eeeeee;
    }
    .btnCtrl{
        max-width: 540px;
        margin: 15px auto;
    }
    .btnBox{
        max-width: 80px;
        display: inline-block;
        margin-right: 10px;
    }
    .boxCtrl{
        max-width:560px ;
        margin: 10px auto;
        position: relative;
    }
    .layerCtrl{
        position: absolute;
        width: 480px;
        height: 35px;
        background-color: #fff;
        box-shadow: 0 1px 6px 0 rgba(32,33,36,.28);
        transition: all .3s;
    }
    .layerCtrl button{
        width: 150px;
    }
    .isShow{
        display: none;
    }

    .rubik-big-a{

        -webkit-user-select:none;

        -moz-user-select:none;

        -ms-user-select:none;

        user-select:none;
    }
    .rubikXBox{
        margin-top: 180px;
    }
</style>
